<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div id="app">
        <div class="formBox">
            <div class="leftBackground"></div>
            <div class="rightForm">
                <h1>账号密码登录</h1>
                <span style="font-size:20px;color:#8B8B8B;">Account password login</span>
                <input type="text" id="inputUid" class="input" placeholder="请输入学号(Please enter the student id)" v-model="user.u_id">                    
                <input type="password" id="inputPwd" class="input" placeholder="请输入密码(Please enter the password)" v-model="user.password">
                <div class="new">
                    <div id="signUp" @click="goregister">
                        <p style="margin-bottom: 0;">注册</p>
                        <p style="margin-top: 0;">New user</p>
                    </div>
                    <div id="forgetPwd" @click="gofindpw">
                        <p style="margin-bottom: 0;">忘记密码？</p>
                        <p style="margin-top: 0;">Forget password</p>
                    </div>
                </div>
                <input type="button" id="submit" @click="login" value="登录"> 
            </div>
        </div>
    </div>

    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>
    
    <script>
        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {
                  //定义登录数据
                  user:{
                    u_id:'',
                    password:''
                  },
                  loadIdx:null,
                };
            },

            //定义方法
            methods : {
              //登录
              login(){
                  if (this.user.u_id === "admin"){
                      this.loadIdx = layer.load();
                      myAxios.post('/adminLogin',this.user)
                          .then(res=>{
                              layer.close(this.loadIdx);
                              if(res.data.success){
                                  layer.msg('登录成功！', {icon: 1},()=>{
                                      window.location.href = 'admin.html';
                                  });
                              }else{
                                  layer.msg(res.data.message, {icon: 2});
                              }
                          })
                          .catch(err=>{
                              layer.close(this.loadIdx);
                              layer.msg('系统错误！', {icon: 2});
                          });
                  }
                  else {
                      //将登录数据发送至服务器
                      this.loadIdx = layer.load();
                      myAxios.post('/login',this.user)
                          .then(res=>{
                              layer.close(this.loadIdx);
                              if(res.data.success){
                                  layer.msg('登录成功！', {icon: 1},()=>{
                                      window.location.href = 'home.html';
                                  });
                              }else{
                                  layer.msg(res.data.message, {icon: 2});
                              }
                          })
                          .catch(err=>{
                              layer.close(this.loadIdx);
                              layer.msg('系统错误！', {icon: 2});
                          });
                  }
                },

                goregister(){
                  window.location.href = "register.html";
                },

                gofindpw(){
                    window.location.href = "findpw.html";
                }


            },   
            
        };

        Vue.createApp(app).mount('#app')
    </script>

</body>
</html>